<template>
  <div v-loading="submitOrderBtnLoading" :element-loading-text="submitOrderBtnText">
    <header-login />
    <div class="bgc-white">
      <div class="container-width">
        <logo-bar :buy-logo="true" :advantage="false" :search="false" :cart-count="false" :line-step="true" step="2" />
      </div>
    </div>
    <div class="container-width">
      <div class="bgc-white cart-container mar-t-20 mar-b-20">
        <el-tabs v-model="activeTabName" class="tabs" @tab-click="handleTabClick" v-if="isShowCrossBorderOrderTypeList">
          <el-tab-pane :label="value" :name="String(key)" v-for="(value,key) in crossBorderOrderTypeList">
          </el-tab-pane>
        </el-tabs>
        <!-- <div class="font-16 border-b-line pad-l-20 pad-r-20 pad-t-19 pad-b-20">
          选择收货地址
        </div> -->
        <div class="border-b-line pad-l-20 pad-r-20 pad-t-19 pad-b-20" v-loading="addressListLoading"
          :element-loading-text="addressLoadingText">
          <h2 class="short-t">常用地址</h2>
          <div v-if="addressList.length" class="flex flex-wrap mar-r--20">
            <div v-for="(item, index) in addressList" :key="index">
              <div v-if="item.show" class="address-item cursor-p mar-r-20 mar-b-20"
                :class="item.defaultFlag ? 'actived' : ''" @click="selectAddress(item, index)">
                <div class="item-border position-r pad-l-18 pad-r-18">
                  <img v-show="item.defaultFlag" :src="iconAddressSel" alt=""
                    class="icon-address-actived width-34 height-31">
                  <div class="flex flex-between border-a-b pad-t-11 pad-b-13 mar-b-7">
                    <div class="font-w">
                      <span>{{ item.receiverName }}</span>
                      <span class="pad-l-15">收</span>
                    </div>
                    <span class="tag-city">{{ item.isOverseas === 1 ? '海外' : '中国' }}</span>
                  </div>
                  <div class="line-address">
                    <span>{{ item.addressName }}</span>
                  </div>
                  <div class="line-address">
                    <span>{{ item.address }}</span>
                    <span>{{ item.houseNum }}</span>
                  </div>
                  <div class="pad-t-10">
                    <span>{{ item.receiverPhone }}</span>
                  </div>
                  <div class="edit-bar font-12 mar-t-10">
                    <span class="font-blue-3FF font-under mar-r-20" @click.stop="editAddress(item, index)">修改</span>
                    <span @click.stop="removeAddress(item, index)">删除</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 空数据展示 -->
          <none-data v-if="!addressList.length" />
          <div v-if="addressList.length > 4" class="align-c">
            <div v-show="!viewType" class="flex v-align-c cursor-p" @click="viewMoreAddress">
              <span>展开更多</span>
              <span class="mar-t-5 mar-l-5">
                <el-icon color="#333333" :size="16">
                  <arrow-down />
                </el-icon>
              </span>
            </div>
            <div v-show="viewType" class="flex v-align-c cursor-p" @click="viewLessAddress">
              <span>收缩查看</span>
              <span class="mar-t-5 mar-l-5">
                <el-icon color="#333333" :size="16">
                  <arrow-up />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
        <div class="border-b-line pad-l-20 pad-r-20 pad-t-27 pad-b-24">
          <h2 class="short-t">实际收货地址</h2>
          <div class="flex">
            <div class="receiver-le pad-t-30">
              <!--              <div class="flex v-align-c pad-b-20">
                <span class="le-label">国家地区：</span>
                <div class="flex-item">
                  <div class="flex">
                    <el-select v-model="receiverData.country" class="flex-item" placeholder="请选择">
                      <el-option v-for="item in countryData" :key="item.code" :label="item.name" :value="item.code" />
                    </el-select>
                  </div>
                </div>
              </div> -->
              <div class="flex v-align-c pad-b-20">
                <span class="le-label">收货人：</span>
                <div class="flex-item">
                  <el-input v-model="orderCheck.addressDTO.receiverName" placeholder="控制60个字以内" maxlength="60" />
                </div>
              </div>
              <div class="flex v-align-c pad-b-20">
                <span class="le-label">所属地区：</span>
                <div class="flex-item">
                  <address-selected ref="addressSelected" :selectedAreaCall="handleSelectedAreaCall"></address-selected>
                </div>
              </div>
              <div class="flex pad-b-20">
                <span class="le-label">详细地址：</span>
                <div class="flex-item">
                  <el-input v-model="orderCheck.addressDTO.address" :rows="5" type="textarea" placeholder="请输入具体地址" />
                </div>
              </div>
              <div class="flex v-align-c pad-b-20">
                <span class="le-label">邮编：</span>
                <div class="flex-item">
                  <el-input v-model="orderCheck.addressDTO.customerPostCode" placeholder="请输入" />
                </div>
              </div>
              <div class="flex v-align-c pad-b-20">
                <span class="le-label">手机号码：</span>
                <div class="flex-item">
                  <el-input v-model="orderCheck.addressDTO.receiverPhone" placeholder="请输入" maxlength="11"
                    @blur="checkInput('receiverPhone')"
                    @input="orderCheck.addressDTO.receiverPhone = validUtils.checkInputPositiveNum(orderCheck.addressDTO.receiverPhone)" />
                </div>
              </div>
              <div class="flex v-align-c pad-b-7">
                <span class="le-label">固定电话：</span>
                <div class="flex-item">
                  <div class="flex v-align-c">
                    <el-input v-model="orderCheck.addressDTO.telPhoneCode" class="flex-item" placeholder="区号"
                      maxlength="5"
                      @input="orderCheck.addressDTO.telPhoneCode = validUtils.checkInputPositiveNum(orderCheck.addressDTO.telPhoneCode)" />
                    <span class="width-12 text-align-c font-color-9">-</span>
                    <el-input v-model="orderCheck.addressDTO.telPhone" class="flex-item" placeholder="电话号码"
                      maxlength="13"
                      @input="orderCheck.addressDTO.telPhone = validUtils.checkInputPositiveNum(orderCheck.addressDTO.telPhone)" />
                    <span class="width-12 text-align-c font-color-9">-</span>
                    <el-input v-model="orderCheck.addressDTO.telPhoneBranchCode" class="flex-item" placeholder="分号"
                      maxlength="5"
                      @input="orderCheck.addressDTO.telPhoneBranchCode = validUtils.checkInputPositiveNum(orderCheck.addressDTO.telPhoneBranchCode)" />
                  </div>
                </div>
              </div>
              <div class="flex v-align-c pad-b-20">
                <span class="le-label">&nbsp;</span>
                <div class="flex-item">
                  <div class="flex v-align-c">
                    <el-checkbox v-model="orderCheck.addressDTO.isSaveCustomerAddress" />
                    <span class="pad-l-6">保存收货地址</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="receiver-ri flex-item" v-loading="isMatchAddressLoading" element-loading-text="正在匹配地址中...">
              <div class="flex pad-b-20">
                <span class="le-label">粘贴地址：</span>
                <div class="flex-item">
                  <el-input v-model="copyAddressDetail" :rows="5" type="textarea" placeholder="请输入具体地址" />
                </div>
              </div>
              <div class="align-r pad-t-3">
                <el-button class="auto-match-btn" @click="handleMatchAddress">自动匹配</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="font-16 border-t-line border-b-line pad-l-20 pad-r-20 pad-t-27 pad-b-20">
          <span>发货地址</span>
          <span class="font-14 font-blue-3FF mar-l-10 cursor-p" @click="viewExpressPicture">查看实例</span>
        </div>
        <div class="font-14 pad-l-20 pad-r-20 pad-t-19 pad-b-30">
          <span>发货信息：</span>
          <span class="font-14 font-blue-3FF font-under mar-l-10 cursor-p" @click="editDeliver">修改</span>
        </div>
        <div class="height-5 bgc-white" />
        <div class="font-16 border-t-line border-b-line pad-l-20 pad-r-20 pad-t-27 pad-b-20">
          <span>确认订单信息</span>
          <span class="font-14 font-color-6 pad-l-16">若同时选择多种货源地商品，将自动拆分为多个订单</span>
        </div>
        <goods-list :pOrderCheckShopData="orderCheck.orderCheckDTO" />
        <!-- 空数据展示 -->
        <none-data v-if="false" />
        <div class="height-6" :style="!affixBoolean ? 'background : ' + backgroundValue : ''"></div>
        <el-affix class="affix" position="bottom" :offset="0" @change="affixChange">
          <div class="submit-top" :class="!affixBoolean ? 'fixed' : ''"
            :style="!affixBoolean ? 'background : ' + backgroundValue : ''">
            <div class="bgc-white">
              <div class="flex v-align-c height-66 pad-l-20">
                <div class="font-18 pad-r-30">配送至：{{ orderCheck.addressDTO.addressName }}</div>
                <div class="font-18 pad-l-6">收货人：{{ orderCheck.addressDTO.receiverName }}</div>
                <div class="flex-item">&nbsp;</div>
                <div class="pad-l-26">合计(含运费)：</div>
                <div class="font-20 font-w font-price-00B mar-r-30 pad-r-15">
                  ￥{{ orderCheck.orderCheckDTO.orderTotalPayableAmount }}
                </div>
                <!-- <el-button class="submit-btn">提交订单</el-button> -->
                <!-- 去结算不可操作按钮展示样式 -->
                <el-button :class="!disabledSubmitOrderBtn ?'submit-btn' : 'submit-btn disabled'"
                  @click="handleSubmitOrder" :disabled="disabledSubmitOrderBtn" :loading="submitOrderBtnLoading">
                  {{ submitOrderBtnText }}
                </el-button>
              </div>
            </div>
          </div>
        </el-affix>
        <div class="height-28" :style="!affixBoolean ? 'background : ' + backgroundValue : ''"></div>
      </div>
    </div>
    <div class="bgc-white">
      <div class="container-width">
        <footer-links />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
    <deliver-dialog ref="dialogDeliver" :onSureCall="handleDeliveryInfoCall" />
    <right-nav-sticky />
    <confirm-dialog ref="confirmDialogRef" :onSure="handleConfirmSure"></confirm-dialog>
    <express-picture-dialog ref="dialogExpressPicture" />
    <add-address-dialog ref="addressRef" :onSure="handleAddAddressDialogSure" />
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref,
    inject,
    watch,
    getCurrentInstance
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import headerLogin from '@/components/headerLogin/index.vue'
  import logoBar from '@/components/logoBar/index.vue'
  import footerLinks from '@/components/footerLinks/index.vue'
  import footerInfos from '@/components/footerInfos/index.vue'
  import {
    ArrowDown,
    ArrowUp
  } from '@element-plus/icons-vue'
  import iconAddressSel from '@/assets/images/icon_address_actived.png'
  import goodsList from './components/goodsList/index.vue'
  import rightNavSticky from '@/components/rightNavSticky/index.vue'
  import deliverDialog from './components/deliverDialog/index.vue'
  import expressPictureDialog from './components/expressPictureDialog/index.vue'
  import addressSelected from '../../components/addressSelected/index.vue'
  import noneData from '@/components/noneData/index.vue'
  import confirmDialog from '@/components/confirmDialog/index.vue'
  import addAddressDialog from '../center/address/components/AddAddressDialog/index.vue'
  import {
    useState
  } from '@/store/utils/useState'
  import {
    useActions
  } from '@/store/utils/useActions'
  import {
    getOrderCheckAddress,
    getOrderCheckGoodsList
  } from '@/api/order/orderCheck'
  import {
    doSubmitOrder
  } from '@/api/order/order'
  import {
    ElMessage
  } from 'element-plus'
  import {
    deleteBatchUserAddress,
    getAddressMatchAreaCode
  } from '@/api/user/address'
  import {
    getCrossBorderOrderTypeList
  } from '@/api/common/common'
  export default defineComponent({
    name: 'Cart',
    components: {
      headerLogin,
      logoBar,
      footerLinks,
      footerInfos,
      ArrowDown,
      ArrowUp,
      goodsList,
      rightNavSticky,
      deliverDialog,
      expressPictureDialog,
      noneData,
      confirmDialog,
      addressSelected,
      addAddressDialog
    },
    setup() {
      const router = useRouter()
      const validUtils = inject('validUtils')
      const copyAddressDetail = ref('')
      // 订单核对页对象
      const orderCheck = ref({
        senderName: '',
        senderPhone: '',
        crossBorderOrderType: '',
        addressDTO: {
          addressId: '',
          receiverName: '',
          receiverPhone: '',
          provinceCode: '',
          cityCode: '',
          districtCode: '',
          streetCode: '',
          address: '',
          addressName: '',
          customerPostCode: '',
          telPhoneCode: '',
          telPhone: '',
          telPhoneBranchCode: '',
          isSaveCustomerAddress: false,
          isOverseas: 0
        },
        orderCheckDTO: {
          // 有效的店铺和商品数据
          efficientShopList: [],
          // 无效的店铺和商品数据
          invalidShopList: [],
          // 订单总应付金额
          orderTotalPayableAmount: 0.00
        }
      })
      const addressList = ref( < any > [])
      const viewType = ref( < number > 0)
      const countryData = ref( < any > [])
      const provinceData = ref( < any > [])
      const cityData = ref( < any > [])
      const districtData = ref( < any > [])
      const backgroundValue = inject('backgroundValue')
      const dialogVisible = ref( < boolean > true)
      const dialogDeliver = ref( < any > null)
      const confirmDialogRef = ref( < any > null)
      const addressRef = ref( < any > null)
      const addressSelected = ref( < any > null)
      // 是否禁用提交订单按钮
      const disabledSubmitOrderBtn = ref(true)
      const orderCheckParams = ref({})
      const storeState = useState('orderCheck', ['orderCheckParams'])
      const currentOpeartAddressIds = ref([])
      // 当前操作编辑的收货地址
      const currentOpeartEditAddress = ref({})
      const addressListLoading = ref(false)
      const addressLoadingText = ref('加载中')
      const submitOrderBtnLoading = ref(false)
      const submitOrderBtnText = ref('提交订单')
      const storeActions: any = useActions('orderCheck', ['setOrderCheckParams'])
      const activeTabName = ref( < string > '1')
      const crossBorderOrderTypeList = ref( < any > [])
      const isShowCrossBorderOrderTypeList = ref(false)
      const affixBoolean = ref( < boolean > true)
      const dialogExpressPicture = ref( < any > null)
      const isMatchAddressLoading = ref(false)
      onMounted(() => {
        orderCheckParams.value = storeState.orderCheckParams.value
        if (orderCheckParams.value) {
          orderCheck.value.crossBorderOrderType = orderCheckParams.value.crossBorderOrderType
          if (!orderCheckParams.value.crossBorderOrderType) {
            isShowCrossBorderOrderTypeList.value = true
          }
          if (isShowCrossBorderOrderTypeList.value) {
            initGetCrossBorderOrderTypeList()
          } else {
            initGetOrderCheckAddress()
          }
        } else {
          router.push({
            path: '/404'
          })
        }
      })

      watch(() => orderCheck.value.addressDTO, (newVal, oldVal) => {
        orderCheck.value.addressDTO = newVal
        checkDisabledSubmitOrderBtn()
      }, {
        deep: true //深度监听
      })

      const initGetCrossBorderOrderTypeList = () => {
        getCrossBorderOrderTypeList().then(response => {
          crossBorderOrderTypeList.value = response.data
          if (response.data) {
            for (let key in response.data) {
              activeTabName.value = key + ''
              break
            }
            orderCheckParams.value.crossBorderOrderType = activeTabName.value
            orderCheck.value.crossBorderOrderType = activeTabName.value
            initGetOrderCheckAddress()
          }
        })
      }


      // 校验提交按钮，是否能点击
      const checkDisabledSubmitOrderBtn = () => {
        const initdisabledSubmitOrderBtn = ref(true)
        let addressDTO = orderCheck.value.addressDTO
        if (addressDTO.receiverName) {
          if (addressDTO.provinceCode && addressDTO.cityCode && addressDTO.districtCode && addressDTO.address) {
            if (addressDTO.receiverPhone || (addressDTO.telPhoneCode && addressDTO.telPhone)) {
              initdisabledSubmitOrderBtn.value = false
            }
          }
        }
        if (!initdisabledSubmitOrderBtn.value) {
          initdisabledSubmitOrderBtn.value = true
          if (!validUtils.isEmpty(addressDTO.receiverPhone) || (!validUtils.isEmpty(addressDTO
                .customerTelPhone) &&
              !validUtils.isEmpty(addressDTO.customerTelPhoneCode))) {
            if (!validUtils.isEmpty(addressDTO.receiverPhone) && validUtils.isValidatePhone(addressDTO
                .receiverPhone)) {
              initdisabledSubmitOrderBtn.value = false
            }
          }
        }
        if (!initdisabledSubmitOrderBtn.value) {
          let orderCheckDTO = orderCheck.value.orderCheckDTO
          if (orderCheckDTO.efficientShopList && orderCheckDTO.efficientShopList.length > 0) {
            initdisabledSubmitOrderBtn.value = false
          } else {
            initdisabledSubmitOrderBtn.value = true
          }
        }
        let orderCheckDTO = orderCheck.value.orderCheckDTO
        if (!initdisabledSubmitOrderBtn.value) {
          if (orderCheckDTO.efficientShopList && orderCheckDTO.efficientShopList
            .length >= 0) {
            initdisabledSubmitOrderBtn.value = false
          } else {
            initdisabledSubmitOrderBtn.value = true
          }
        }
        if (!initdisabledSubmitOrderBtn.value) {
          if (!initdisabledSubmitOrderBtn.value && orderCheckDTO.invalidShopList && orderCheckDTO.invalidShopList
            .length > 0) {
            initdisabledSubmitOrderBtn.value = true
          } else {
            initdisabledSubmitOrderBtn.value = false
          }
        }
        disabledSubmitOrderBtn.value = initdisabledSubmitOrderBtn.value
      }

      const handleSelectedAreaCall = (callAddressDTO: any) => {
        const isLoadGoods = ref(false)
        if (orderCheck.value.addressDTO.provinceCode !== callAddressDTO.provinceCode ||
          orderCheck.value.addressDTO.cityCode !== callAddressDTO.cityCode ||
          orderCheck.value.addressDTO.districtCode !== callAddressDTO.districtCode ||
          orderCheck.value.addressDTO.streetCode !== callAddressDTO.streetCode) {
          isLoadGoods.value = true
        }
        orderCheck.value.addressDTO.provinceCode = callAddressDTO.provinceCode
        orderCheck.value.addressDTO.cityCode = callAddressDTO.cityCode
        orderCheck.value.addressDTO.districtCode = callAddressDTO.districtCode
        orderCheck.value.addressDTO.streetCode = callAddressDTO.streetCode
        orderCheck.value.addressDTO.addressName = callAddressDTO.addressName
        orderCheck.value.addressDTO.isOverseas = callAddressDTO.isOverseas
        if (isLoadGoods.value) {
          initGetOrderCheckShopGoodsList(orderCheckParams.value)
        }
      }

      // 获取收货地址
      const initGetOrderCheckAddress = () => {
        let isOverseas = orderCheckParams.value.crossBorderOrderType === '1' ? 0 : 1
        let dataParams = {
          crossBorderOrderType: orderCheckParams.value.crossBorderOrderType
        }
        addressListLoading.value = true
        addressLoadingText.value = '加载中'
        getOrderCheckAddress(dataParams).then(response => {
          addressListLoading.value = false
          if (response.isError) return
          addressList.value = response.data
          viewLessAddress()
          const addressDTO = orderCheck.value.addressDTO
          if (!validIsWriteAddress()) {
            addressList.value.forEach((item) => item.defaultFlag = 0)
            // let defaultAddress = addressList.value.find((item) => {
            //   return item.defaultFlag === 1
            // })
            // if (defaultAddress) {
              // setInitAddress(defaultAddress)
            // } else {
              let addressDTO = {
                isOverseas: isOverseas
              }
              setInitAddress(addressDTO)
            // }
            initGetOrderCheckShopGoodsList(orderCheckParams.value)
          }
        })
      }
      // 验证是否填写过收货地址
      const validIsWriteAddress = () => {
        if (currentOpeartEditAddress.value && currentOpeartEditAddress.value.addressId) {
          const addressDTO = orderCheck.value.addressDTO
          if (addressDTO.addressId && addressDTO.addressId === currentOpeartEditAddress.value.addressId) {
            return false
          } else {
            if (addressDTO.addressId || addressDTO.receiverName || addressDTO.receiverPhone || addressDTO
              .provinceCode ||
              addressDTO.cityCode || addressDTO.districtCode || addressDTO.streetCode || addressDTO.address ||
              addressDTO.customerPostCode || addressDTO.telPhoneCode || addressDTO.telPhone || addressDTO
              .telPhoneBranchCode) {
              return true
            }
          }
        }
        return false
      }

      const setInitAddress = (addressDTO: any) => {
        let addressJsonStr = JSON.stringify(addressDTO)
        orderCheck.value.addressDTO = JSON.parse(addressJsonStr)
        // addressSelected.value.setIsOverseas(addressDTO.isOverseas)
        addressSelected.value.setAddress(addressDTO.isOverseas === 1 ? 4 : 3, addressDTO
          .provinceCode, addressDTO
          .cityCode, addressDTO.districtCode,
          addressDTO.streetCode)
      }
      // 地址判断显示几个
      const viewMoreAddress = () => {
        viewType.value = 1
        // 收货地址"展开更多"展示item
        if (addressList.value.length) {
          addressList.value.forEach((item: any) => {
            item.show = true
          })
        }
      }
      const viewLessAddress = () => {
        viewType.value = 0
        // 初始收货地址设置展示item
        if (addressList.value.length) {
          addressList.value.forEach((item: any, index: number) => {
            item.show = false
            // 根据收货地址长度，展示item个数
            if (addressList.value.length > 3) {
              if (index < 4) {
                addressList.value[index].show = true
              }
            } else {
              addressList.value[index].show = true
            }
          })
        }
      }
      // 获取店铺商品数据
      const isLoadGoodsList = ref(false)
      const initGetOrderCheckShopGoodsList = (dataParams: any) => {
        if (!isLoadGoodsList.value) {
          disabledSubmitOrderBtn.value = true
          orderCheck.value.orderCheckDTO.efficientShopList = []
          orderCheck.value.orderCheckDTO.invalidShopList = []
          isLoadGoodsList.value = true
          dataParams.address = orderCheck.value.addressDTO
          getOrderCheckGoodsList(dataParams).then(response => {
            isLoadGoodsList.value = false
            if (!response.isError) {
              orderCheck.value.orderCheckDTO = response.data
            }
            checkDisabledSubmitOrderBtn()
          })
        }
      }
      // 选择地址
      const selectAddress = (item: object, index: number) => {
        addressList.value.forEach((item: any) => {
          item.defaultFlag = 0
        })
        item.defaultFlag = 1
        setInitAddress(item)
        initGetOrderCheckShopGoodsList(orderCheckParams.value)
      }
      const editAddress = (item: object, index: number) => {
        currentOpeartEditAddress.value = item
        addressRef.value.handleDialogOpen(item.addressId)
      }
      // 修改地址回调函数
      const handleAddAddressDialogSure = () => {
        initGetOrderCheckAddress()
      }

      // 删除收货地址
      const removeAddress = (item: object, index: number) => {
        confirmDialogRef.value.openConfirm('是否确认要删除吗？')
        currentOpeartAddressIds.value.push(item.addressId)
      }

      // 确认框,回调函数
      const handleConfirmSure = () => {
        if (currentOpeartAddressIds.value.length > 0) {
          addressListLoading.value = true
          addressLoadingText.value = '删除中'
          deleteBatchUserAddress(currentOpeartAddressIds.value).then(response => {
            addressListLoading.value = false
            if (response.isError) return
            let flag = currentOpeartAddressIds.value.findIndex(item => item === orderCheck.value.addressDTO
              .addressId)
            if (flag >= 0) {
              setInitAddress({
                addressName: ''
              })
            }
            currentOpeartAddressIds.value = []
            initGetOrderCheckAddress()
            ElMessage.success(response.msg)
          })
        }
      }



      // 编辑发货人
      const editDeliver = () => {
        dialogDeliver.value.handleDialogOpen(orderCheck.value.senderName, orderCheck.value.senderPhone)
      }
      // 处理发件人信息回调函数
      const handleDeliveryInfoCall = (receive: object) => {
        orderCheck.value.senderName = receive.name
        orderCheck.value.senderPhone = receive.phone
      }
      // 提交订单
      const handleSubmitOrder = () => {
        let addressDTO = orderCheck.value.addressDTO
        if (validUtils.isEmpty(addressDTO.receiverName)) {
          ElMessage.error('请填写收货人!')
          return false
        }
        if (validUtils.isEmpty(addressDTO.receiverPhone) && (validUtils.isEmpty(addressDTO.customerTelPhone) &&
            validUtils.isEmpty(addressDTO.customerTelPhoneCode))) {
          ElMessage.error('手机号码或固定电话必须填写一项!')
          return false
        }
        if (!validUtils.isEmpty(addressDTO.receiverPhone) && !validUtils.isValidatePhone(addressDTO
            .receiverPhone)) {
          ElMessage.error('手机号码不正确!')
          return false
        }
        if (validUtils.isEmpty(addressDTO.provinceCode) || validUtils.isEmpty(addressDTO
            .cityCode) || validUtils.isEmpty(addressDTO.districtCode)) {
          ElMessage.error('请选择所属地区!')
          return false
        }
        if (addressDTO.isOverseas === 1 && validUtils.isEmpty(addressDTO.streetCode)) {
          ElMessage.error('请选择所属地区!')
          return false
        }
        if (validUtils.isEmpty(addressDTO.address)) {
          ElMessage.error('请填写详细地址!')
          return false
        }
        const goodsList = []
        orderCheck.value.orderCheckDTO.efficientShopList.forEach((itemShop) => {
          itemShop.goodsResponseList.forEach((itemGoods) => {
            let goods = {
              goodsId: itemGoods.goodsId,
              skuId: itemGoods.skuId ? itemGoods.skuId : '',
              goodsNum: itemGoods.goodsNum,
              cartId: itemGoods.cartId ? itemGoods.cartId : ''
            }
            goodsList.push(goods)
          })
        })
        if (goodsList.length <= 0) {
          ElMessage.error('没有商品数据无法提交!')
          returns
        }

        const orderCreateDTO = {
          addressId: orderCheck.value.addressDTO.addressId,
          customerNickname: orderCheck.value.addressDTO.receiverName,
          customerPhone: orderCheck.value.addressDTO.receiverPhone,
          customerProvinceCode: orderCheck.value.addressDTO.provinceCode,
          customerCityCode: orderCheck.value.addressDTO.cityCode,
          customerDistrictCode: orderCheck.value.addressDTO.districtCode,
          customerStreetCode: orderCheck.value.addressDTO.streetCode,
          customerAddress: orderCheck.value.addressDTO.address,
          customerTelPhoneCode: orderCheck.value.addressDTO.telPhoneCode,
          customerTelPhone: orderCheck.value.addressDTO.telPhone,
          customerTelPhoneBranchCode: orderCheck.value.addressDTO.telPhoneBranchCode,
          isSaveCustomerAddress: orderCheck.value.addressDTO.isSaveCustomerAddress ? true : false,
          customerIsOverseas: orderCheck.value.addressDTO.isOverseas,
          senderName: orderCheck.value.senderName,
          senderPhone: orderCheck.value.senderPhone,
          crossBorderOrderType: orderCheck.value.crossBorderOrderType,
          goodsList: goodsList
        }
        submitOrderBtnLoading.value = true
        submitOrderBtnText.value = '正在提交订单...'
        doSubmitOrder(orderCreateDTO).then(response => {
          submitOrderBtnLoading.value = false
          submitOrderBtnText.value = '提交订单'
          if (response.isError) return
          storeActions.setOrderCheckParams(null)
          router.push({
            path: '/buy/pay-type',
            query: {
              orderId: response.data.orderId
            }
          })
        })
      }

      // 验证
      const checkInput = (inputName: string) => {
        if (inputName === 'receiverPhone') {
          if (orderCheck.value.addressDTO.receiverPhone) {
            if (!validUtils.isValidatePhone(orderCheck.value.addressDTO.receiverPhone)) {
              ElMessage.error('手机号码不正确!')
              return false
            }
          }
        }
        return true
      }
      // 切换业务类型
      const handleTabClick = (tab: string) => {
        orderCheck.value.crossBorderOrderType = tab.props.name
        orderCheckParams.value.crossBorderOrderType = orderCheck.value.crossBorderOrderType
        initGetOrderCheckAddress()
      }

      const affixChange = (e: any) => {
        affixBoolean.value = e
      }

      const viewExpressPicture = () => {
        dialogExpressPicture.value.handleDialogOpen()
      }
      // 匹配地址
      const handleMatchAddress = () => {
        if (validUtils.isEmpty(copyAddressDetail.value)) {
          ElMessage.error('输入要匹配的地址!')
          return false
        }
        isMatchAddressLoading.value = true
        getAddressMatchAreaCode(copyAddressDetail.value).then(response => {
          isMatchAddressLoading.value = false
          if (response.isError) return
          let addressDTO = response.data
          const orderCheckAddressDTO = JSON.parse(JSON.stringify(orderCheck.value.addressDTO))
          orderCheckAddressDTO.address = addressDTO.address
          orderCheckAddressDTO.isOverseas = addressDTO.isOverseas
          const isLoadGoods = ref(false)
          if (addressDTO.provinceCode) {
            if (orderCheckAddressDTO.provinceCode !== addressDTO.provinceCode) {
              isLoadGoods.value = true
            }
            orderCheckAddressDTO.provinceCode = addressDTO.provinceCode
            if (addressDTO.cityCode) {
              if (orderCheckAddressDTO.cityCode !== addressDTO.cityCode) {
                isLoadGoods.value = true
              }
              orderCheckAddressDTO.cityCode = addressDTO.cityCode
              if (addressDTO.districtCode) {
                if (orderCheckAddressDTO.districtCode !== addressDTO.districtCode) {
                  isLoadGoods.value = true
                }
                orderCheckAddressDTO.districtCode = addressDTO.districtCode
                if (addressDTO.streetCode) {
                  if (orderCheckAddressDTO.streetCode !== addressDTO.streetCode) {
                    isLoadGoods.value = true
                  }
                  orderCheckAddressDTO.streetCode = addressDTO.streetCode
                }
              }
            }
          }
          orderCheck.value.addressDTO = orderCheckAddressDTO
          setInitAddress(orderCheck.value.addressDTO)
          if (isLoadGoods.value) {
            initGetOrderCheckShopGoodsList(orderCheckParams.value)
          }
        })
      }

      return {
        addressList,
        selectAddress,
        editAddress,
        removeAddress,
        iconAddressSel,
        viewType,
        viewMoreAddress,
        viewLessAddress,
        countryData,
        provinceData,
        cityData,
        districtData,
        backgroundValue,
        dialogVisible,
        editDeliver,
        handleDeliveryInfoCall,
        dialogDeliver,
        ...storeState,
        ...storeActions,
        orderCheck,
        handleSubmitOrder,
        disabledSubmitOrderBtn,
        addressSelected,
        handleSelectedAreaCall,
        checkInput,
        addressListLoading,
        addressLoadingText,
        handleConfirmSure,
        confirmDialogRef,
        submitOrderBtnLoading,
        submitOrderBtnText,
        activeTabName,
        crossBorderOrderTypeList,
        handleTabClick,
        isShowCrossBorderOrderTypeList,
        affixBoolean,
        affixChange,
        viewExpressPicture,
        dialogExpressPicture,
        addressRef,
        handleAddAddressDialogSure,
        handleMatchAddress,
        isMatchAddressLoading,
        copyAddressDetail
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $bgBorder: #f5f6fa;

  .cart-container {
    min-height: 500px;

    // ::v-deep(.affix) {
    //   height: 66px !important;
    // }

    ::v-deep(.tabs) {
      .el-tabs__nav {
        padding: 0 0 0 27px;
      }

      .el-tabs__header {
        margin: 0 0 4px 0;
      }

      .el-tabs__item {
        text-align: center;
        color: #999999;
        position: relative;
        height: 62px;
        line-height: 62px;
        font-size: 16px;

        &:last-child {
          margin-left: 32px;
          margin-right: 0;
        }
      }

      .el-tabs__item.is-active {
        color: $darkBlue;
      }

      .el-tabs__active-bar {
        height: 3px;
        background-color: $darkBlue;
      }

      .el-tabs__nav-wrap::after {
        height: 1px;
        background-color: #f5f6fa;
      }
    }

    .border-b-line {
      border-bottom: $bgBorder 1px solid;
    }

    .border-t-line {
      border-top: $bgBorder 10px solid;
    }

    .short-t {
      font-weight: normal;
      margin: 0 0 19px 0;
      padding: 0;
      font-size: 16px;
    }

    .address-item {
      width: 321px;
      height: 166px;
      background: #fff;
      border: #f5f5f5 1px solid;
      box-sizing: content-box;

      &:hover {
        background: #f7f7f7;
        border: #f5f5f5 1px solid;

        .item-border {
          border: #f7f7f7 1px solid;
        }

        .border-a-b {
          border-bottom: #e9e9e9 1px solid;
        }

        .edit-bar {
          display: block;
        }
      }

      &.actived {
        background: #ffffff;
        border: #182245 1px solid;
        font-weight: bold;

        &:hover {
          background: #fff;
          border: #182245 1px solid;

          .border-a-b {
            border-bottom: #f5f5f5 1px solid;
          }
        }

        .item-border {
          border: #182245 1px solid;
        }
      }

      .edit-bar {
        display: none;
      }

      .item-border {
        border: #fff 1px solid;
        height: 164px;
        box-sizing: content-box;
      }

      .border-a-b {
        border-bottom: #f5f5f5 1px solid;
      }

      .tag-city {
        background: #ff604b;
        color: #fff;
        font-size: 12px;
        font-weight: normal;
        padding: 0 2px;
      }

      .line-address {
        line-height: 1.7;
      }

      .icon-address-actived {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }

    .receiver-le {
      width: 670px;
      background: #fafafa;
      padding-right: 60px;

      .le-label {
        width: 135px;
        text-align: right;
      }

      ::-webkit-input-placeholder {
        color: #999999;
      }

      ::-moz-placeholder {
        color: #999999;
      }
    }

    .receiver-ri {
      padding-left: 16px;
      padding-right: 136px;

      .le-label {
        width: 135px;
        text-align: right;
      }

      ::-webkit-input-placeholder {
        color: #999999;
      }

      ::-moz-placeholder {
        color: #999999;
      }

      ::v-deep(.auto-match-btn) {
        &.el-button {
          background: $darkBlue;
          color: #fff;
          border-radius: 0;
          border: none;
          font-size: 16px;
          padding: 0 0px;
          width: 104px;
        }
      }
    }

    .submit-top {
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);

      &.fixed {
        background: #f5f5f5;
        box-shadow: 0px 0px 0px;
      }
    }

    ::v-deep(.submit-btn) {
      &.el-button {
        color: #ffffff;
        background: #ff500b;
        padding: 0px 0px;
        min-height: 66px;
        width: 160px;
        font-size: 20px;
        font-weight: bold;
        border-radius: 0;
        border: none;

        &.disabled {
          color: #ffffff;
          background: #dddddd;
        }
      }
    }
  }
</style>
